<link  type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
      dir: 'https://www.layuicdn.com/layui/' 
      ,version: false 
      ,debug: false 
      ,base: '' 
    });
</script>
<style type="text/css">
	.container-box{
		display: flex;
	}
	.layui-leftbox{
		flex: 0 0 20vw;
		height: 100vh;
		background-color: #666;
	}
	.rightbox{
		flex: 0 0 80vw;
		height: 100vh;
		background-color: #888;
	}
</style>



<div class="container-box">
	<div class="layui-leftbox">
		<!-- 框架的组件文档 "https://www.layui.com/doc/element/nav.html" -->
		<ul class="layui-nav layui-nav-tree" lay-filter="test" style="height: 100%;width: 100%">
			<li class="layui-nav-item layui-nav-itemed">
				<a href="javascript:;">默认展开</a>
				<dl class="layui-nav-child">
					<dd><a href="javascript:;">选项1</a></dd>
					<dd><a href="javascript:;">选项2</a></dd>
					<dd><a href="javascript:;">跳转</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="javascript:;">解决方案</a>
				<dl class="layui-nav-child">
					<dd><a href="javascript:;">移动模块</a></dd>
					<dd><a href="javascript:;">后台模版</a></dd>
					<dd><a href="javascript:;">电商平台</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item"><a href="javascript:;">产品</a></li>
			<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
		</ul>
	</div>


	<!-- 右侧内容区域 -->
	<div class="rightbox">
		
		
	</div>
</div>

<script type="text/javascript">
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use('element', function(){
		var element = layui.element;

	  //…
	});

	//获取侧边栏元素
	var navitem=$('.layui-nav .layui-nav-item');
	//..dosomething
	navitem.click(function(){
		//dosomething
		console.log($(this).index());
	})
</script>
